<template>
  <a-card class="cardBox" :title="isEmbed == false ? `${this.$route.query.processName} - 环节预览` : ''">
    <!-- 左侧预览图 -->
    <div class="formBox" :style="isEmbed == false ? '' : 'border: 1px solid #fff;'">
      <TaskFormView ref="formView" :activeList="activeList" @fGender="sInint" :pattern="2"></TaskFormView>

      <!-- 引导图片 -->
      <div v-if="isEmpty">
        <div class="tipBox">
          <img class="imgBox" src="@/assets/images/none.svg" />
        </div>
        <div class="tipTextBox">*这个环节没有配置字段哦</div>
      </div>
    </div>

    <!-- 右侧步骤条 -->
    <div class="stepBox">
      <a-steps v-model="current" direction="vertical">
        <a-step
          v-for="item in nodeList"
          :key="item.stepid_"
          :title="item.name"
          :description="`${item.fieldnum_}个字段`"
        />
      </a-steps>
    </div>

    <div class="buttonBox" v-if="isEmbed == false">
      <a-button icon="rollback" @click="handleBack"> 返回 </a-button>
    </div>
  </a-card>
</template>
<script>
import { findStepRelation } from '@/api/workflow/act_dsn_form_step.js'
import TaskFormView from '@/views/workflow/Wf_TaskForm.vue'
import { St_step } from '@/enumeration/St_step'
export default {
  props: {
    // 1 编辑模式, 2 预览模式 3 操作模式
    isEmbed: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      St_step: St_step, // 配置状态枚举
      activeList: [], // 当前环节可见的字段列表
      nodeList: [], // 节点列表
      pageinfo: { pageSize: 2147483647, sort: 'field_', order: 'asc' }, // 回显查询条件
      current: 0,
      isEmpty: false, // 空状态
    }
  },
  created() {
    this.pageinfo.formid_ = this.$route.params.formid
  },
  watch: {
    current(index) {
      this.sGender(index)
    },
  },
  methods: {
    sInint() {
      this.findStepRelation(this.$route.params.formid)
    },
    sGender(index) {
      // 调用子组件方法, 控制表单字段的显示状态
      // 找出之前, 之后环节的id
      let beforeIds = [] // 之前环节数组
      let afterIds = [] // 之后环节数组
      for (let i = index - 1; i >= 0; i--) {
        beforeIds.push(this.nodeList[i].id)
      }
      for (let i = index + 1; i <= this.nodeList.length - 1; i++) {
        afterIds.push(this.nodeList[i].id)
      }
      // console.log('*-**-*', this.nodeList[index])
      if (this.nodeList[index].status_ == this.St_step[91100].value) {
        this.$message.warning('该环节还未未配置')
      }
      this.$refs.formView.fGender(this.nodeList[index].id, beforeIds, afterIds)
    },
    // 查询环节列表
    findStepRelation(formid) {
      findStepRelation(formid, 2).then((res) => {
        console.log('环节列表-', res)
        if (res.code == 0) {
          this.nodeList = res.data || []
          if (this.nodeList.length == 0) {
            this.isEmpty = true
          }
          if (this.nodeList.length > 0) {
            this.sGender(0)
          }
        }
      })
    },
    handleBack() {
      this.$router.push({
        path: `/Wf_NodeGuide/${this.$route.params.operation}/${this.$route.params.formid}`,
        query: { pageIndex: this.$route.query.pageIndex },
      })
    },
    onChange(current) {
      console.log('onChange:', current)
      this.current = current
    },
  },
  components: {
    TaskFormView,
  },
}
</script>

<style lang="less" scoped>
/deep/ .ant-input,
/deep/ .ant-select-selection__rendered,
/deep/ .ant-input-number-input-wrap,
/deep/ .ant-time-picker-input {
  background-color: #fff !important;
}
.tipTextBox {
  text-align: center;
  color: rgb(172, 167, 167);
}
.tipBox {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: center;
}
.imgBox {
  width: 25%;
  height: 25%;
  margin-top: 8%;
}
.buttonBox {
  text-align: center;
  margin-top: 30px;
}
.formBox {
  border: 1px solid #eee;
  height: 75vh;
  width: 80%;
  overflow: auto;
  position: relative;
}
.spinBox {
  position: absolute;
  top: 30%;
  left: 45%;
  z-index: 99999;
}
.stepBox {
  // border: 1px solid red;
  width: 20%;
  position: fixed;
  top: 17%;
  z-index: 9999;
  right: 50px;
  height: 80%;
  overflow: auto;
  box-shadow: 3px 3px 15px #ccc;
  border-radius: 4px;
  padding: 10px;
}
.cardBox {
  height: 90vh;
}
</style>